<template>
  <div
    ref="qualityRef"
    class="quality"
    v-loading="isLoading"
    @scroll="handleScroll"
  >
    <div class="header">
      <h1 class="title">精品歌单</h1>
      <div class="btn" id="btn" @click="changeTable">
        <i
          :class="{
            iconfont: true,
            iconxiangxia: !showTable,
            iconxiangshang: showTable
        }"/>
        <span>{{cat}}</span>
      </div>
      <div
        class="table"
        v-if="showTable"
        v-outside="{
          arg: 'btn',
          value: closeTable
        }"
      >
        <div class="table-header" @click="changeCat('全部歌单')">
          <span>全部歌单</span>
        </div>
        <ul class="table-content">
          <li
            class="quality-item"
            v-for="(item, index) of qualityCatlist"
            @click="changeCat(item)"
            :key="index"
          >
            <span :class="{ 'cat': true,  'active': cat === item }">{{item}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="content">
      <ul>
        <template
          v-for="item of qualityPlaylist"
          :key="item"
        >
          <QualityItem :qualityItem="item" @click="selectPlaylist(item.id)" :cat="cat"/>
        </template>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, watch, computed } from 'vue'
import { playlist } from '@/store/modules/playlists'
import { getHighqualityCatlist, getHighquality } from '@/api/playLists'
import { useRouter } from 'vue-router'
import QualityItem from './components/qualityItem.vue'

export default {
  name: 'index',
  components: {
    QualityItem
  },
  setup () {
    const router = useRouter()
    const qualityRef = ref<Element | null>(null)
    const showTable = ref<boolean>(false)
    const qualityCatlist = ref<string[]>([])
    const qualityPlaylist = ref<any[]>([])
    const isLoading = ref<boolean>(false)
    const totals = ref<number>(0)
    const cat = computed(() => playlist.cat)
    const updateTime = computed(() => {
      if (qualityPlaylist.value.length) {
        return qualityPlaylist.value[qualityPlaylist.value.length - 1].updateTime
      } else {
        return 0
      }
    })
    const count = computed(() => qualityPlaylist.value.length)
    const changeTable = () => {
      showTable.value = !showTable.value
    }
    const closeTable = () => {
      showTable.value = false
    }
    const changeCat = (tag) => {
      showTable.value = false
      playlist.changeCat(tag)
    }
    const handleScroll = async () => {
      if (qualityRef.value.scrollHeight - qualityRef.value.scrollTop <= qualityRef.value.clientHeight && count.value < totals.value) {
        isLoading.value = true
        try {
          const { playlists, total } = await getHighquality({ cat: cat.value, before: updateTime.value, limit: 20 })
          qualityPlaylist.value = qualityPlaylist.value.concat(playlists)
        } catch (e) {
          isLoading.value = false
          console.log(e)
        }
        isLoading.value = false
      }
    }
    const selectPlaylist = (id) => {
      router.push({ name: 'playlistDetail', params: { id } })
    }
    watch(() => playlist.cat, async (value) => {
      isLoading.value = true
      try {
        const { data: { tags } } = await getHighqualityCatlist()
        const { playlists, total } = await getHighquality({ cat: value })
        qualityCatlist.value = tags.length ? tags.map(item => item.name) : []
        qualityPlaylist.value = playlists
        totals.value = total
      } catch (e) {
        isLoading.value = false
        console.log(e)
      }
      isLoading.value = false
    }, {
      immediate: true
    })
    return {
      qualityRef,
      isLoading,
      showTable,
      qualityCatlist,
      qualityPlaylist,
      cat,
      handleScroll,
      changeTable,
      closeTable,
      changeCat,
      selectPlaylist
    }
  }
}
</script>

<style lang="scss" scoped>
  .quality {
    padding-top: 60px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-right: 20px;

    .header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding-bottom: 15px;

      .title {
        font-size: 20px;
        font-weight: bold;
      }

      .btn {
        border: 1px solid #D0D0D0;
        font-size: 12px;
        color: #666666;
        display: flex;
        align-items: center;
        padding: 3px 8px;
        height: 14px;
        line-height: 14px;
        border-radius: 10px;
        cursor: pointer;

        > i {
          padding-right: 1px;
          font-size: 14px;
        }

        &:hover {
          background-color: #f8f8f9;
        }
      }

      .table {
        position: absolute;
        right: 0;
        top: 30px;
        width: 580px;
        box-shadow: 0px 0px 2px #D0D0D0;
        border-radius: 5px;
        z-index: 6;
        font-size: 14px;
        background-color: #fff;

        .table-header {
          display: flex;
          align-items: center;
          height: 50px;
          padding: 0 40px;
          border-bottom: 1px solid #cbcbcb;
          cursor: pointer;

          &:hover {
            color: #ec4141;
          }
        }

        .table-content {
          padding: 20px 40px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          .quality-item {
            flex: 0 0 100px;
            margin-bottom: 20px;
            box-sizing: border-box;
            cursor: pointer;

            .cat {
              padding: 5px 10px;
              line-height: 1.2;
              border-radius: 13px;
            }

            .active {
              background-color: #fdf5f5;
              color: #ec4141;
            }

            &:hover {
              color: #ec4141;
            }
          }
        }
      }
    }

    .content {

      >ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }
  }
</style>
